{% extends "management/base.html" %}
{% block title %}注册{% endblock %}

{% block content %}

<!-- Flex 布局实现垂直居中 -->
<div class="container d-flex justify-content-center align-items-center" style="min-height: 80vh; padding-top: 20px; padding-bottom: 20px;">
    <div class="col-md-6 col-sm-8 col-12">

        <!-- 状态提示信息 -->
        {% if state %}
            {% if state == 'success' %}
                <div class="alert alert-success text-center mb-4">
                    <h5>🎉 注册成功！</h5>
                </div>
            {% elif state == 'empty' %}
                <div class="alert alert-warning text-center mb-4">
                    <small>密码不能为空</small>
                </div>
            {% elif state == 'wrong' %}
                <div class="alert alert-danger text-center mb-4">
                    <small>两次输入的密码不一致</small>
                </div>
            {% elif state == 'exist' %}
                <div class="alert alert-warning text-center mb-4">
                    <small>该用户已存在</small>
                </div>
            {% endif %}
        {% endif %}

        <!-- 注册表单 -->
        <form method="POST" class="bg-white border rounded shadow-sm p-4 p-md-5">
            {% csrf_token %}

            <!-- 标题：上下留白，居中 -->
            <h2 class="text-center mb-4 mt-2">请注册</h2>

            <!-- 用户名 -->
            <div class="mb-3">
                <label for="id_username" class="form-label">用户名</label>
                <input type="text"
                       class="form-control"
                       id="id_username"
                       name="username"
                       required
                       autofocus
                       placeholder="例如：zhangsan">
                <div class="form-text text-muted">用于登录，可以包括大小写字母和下划线。</div>
            </div>

            <!-- 密码 -->
            <div class="mb-3">
                <label for="id_password" class="form-label">密码</label>
                <input type="password"
                       class="form-control"
                       id="id_password"
                       name="password"
                       required
                       placeholder="请输入密码">
            </div>

            <!-- 重复密码 -->
            <div class="mb-3">
                <label for="id_repassword" class="form-label">重复密码</label>
                <input type="password"
                       class="form-control"
                       id="id_repassword"
                       name="repeat_password"
                       required
                       placeholder="请再次输入密码">
            </div>

            <!-- 邮箱 -->
            <div class="mb-3">
                <label for="id_email" class="form-label">电子邮件</label>
                <input type="email"
                       class="form-control"
                       id="id_email"
                       name="email"
                       required
                       placeholder="example@domain.com">
            </div>

            <!-- 注册按钮 -->
            <div class="d-grid mb-3">
                <button type="submit" class="btn btn-primary btn-lg">注册</button>
            </div>

            <!-- 返回登录 -->
            <p class="text-center mb-0">
                <small class="text-muted">已有账号？</small>
                <a href="{% url 'login' %}" class="text-decoration-none">去登录</a>
            </p>
        </form>
    </div>
</div>

{% endblock %}